@use "../../colors";
@use "../../frameless";

$base-bg: colors.$ui-white;

.box {
    display: inline-block;
    border: 1px solid colors.$ui-border;
    border-radius: 10px 10px 0 0;
    background-color: colors.$ui-white;
    width: 100%;

    //4 columns
    @media #{frameless.$small} {
        width: frameless.$cols4;

        .box-header {
            h4,
            h5 {
                line-height: .9rem;
                font-size: .9rem;
            }
        }
    }

    //6 columns
    @media #{frameless.$medium} {
        width: frameless.$cols6;

        .box-header {
            h4,
            h5 {
                line-height: 1rem;
                font-size: 1rem;
            }
        }
    }

    //8 columns
    @media #{frameless.$intermediate} {
        width: frameless.$cols8;

        .box-header {
            h4,
            h5 {
                line-height: 1.1rem;
                font-size: 1.1rem;
            }
        }
    }

    //12 columns
    @media #{frameless.$big} {
        width: frameless.$cols12;

        .box-header {
            h4,
            h5 {
                line-height: 1.1rem;
                font-size: 1.1rem;
            }
        }
    }

    .box-header {
        display: block;
        clear: both;
        margin: 0;
        border-top: 1px solid colors.$ui-white;
        border-bottom: 1px solid colors.$ui-border;
        border-radius: 10px 10px 0 0;
        background-color: colors.$ui-gray;

        padding: 8px 20px;
        height: 20px;
        overflow: hidden;

        h4,
        h5 {
            display: inline-block;
            float: left;
        }

        h5 {
            margin: 0;
            padding-left: 5px;
            text-transform: none;
            letter-spacing: normal;
            font-weight: normal;
        }

        p {
            display: inline-block;
            float: right;
            margin: 1px 0 0 0;
            padding: 0;
            font-size: .85rem;
        }
    }

    .box-content {
        display: block;
        clear: both;
        background-color: $base-bg;
        padding: 8px 20px;
    }

    .empty {
        margin-top: 20px;
    }
}
